<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
      <style type="text/css">
	     .selectkpiClass{
		       height:23px;
		       line-height:21px;
			   width:250px;
			   border:#cbcbcb solid 1px;
	     }
	      .buttonClass{
		       height:23px;
		       line-height:21px;
			   width:50px;
			   border:#cbcbcb solid 1px;
	     }
       </style>
      <!-- 自定义javascript函数 -->
	  <script type="text/javascript">
	     $(document).ready(function(){
	    	 //默认隐藏自定义头像
	    	  $("#dqm_systemManager_personalTable").hide();
	    	  //增加隔行变色效果
	    	  $(".listtable").zebra();
	    	 //加载tabs页面
	    	 $('#dqm_systemManager_tabs').tabs({   
    		     border:false,   
    		     onSelect:function(title){
    		    	 if(title=="修改头像"){
    		    		 $("#dqm_systemManager_systemTable").show();
    		    		 $("#dqm_systemManager_personalTable").hide();
    		    	 }
    		     }   
	    	 });
	    	  //加载头像数据
		   	  loadHeadPicture();
	     });
	     //保存用户头像修改
	     function saveHeadPicture(){
	    	 var picpath=$("#dqm_systemManager_personHeadPicture").attr("src");
	    	 picpath=picpath.substring(picpath.indexOf("/webetl/"),picpath.length);
	    	 var userid=$("#dqm_systemManager_userId").val();
	    	 $.ajax({
				 url :'${pageContext.request.contextPath}/systemManagerAction!saveHeadPicture.action',
				 data:{"picpath":picpath,"userid":userid},
				 dataType :'json',
				 cache : true,
				 success : function(r1){ 
				       $.messager.show({
							title:'修改用户头像',
							msg:r1.returnMsg,
							showType:'slide'
						});
				 }
		     });
	     }
	     //保存用户详细资料
	     function saveUserDetail(){
	     	 //校验数据合法性
	    	 if(validateData()){
	    		 //获取用户性别参数
	    	      var usersex=$("input[type=radio][checked]").val();
				  $.ajax({
						 url :'${pageContext.request.contextPath}/systemManagerAction!saveUserDetail.action?sex='+usersex,
						 data:serializeObject($('#dqm_systemManager_frm')),
						 dataType :'json',
						 cache : true,
						 success : function(r1){ 
						       $.messager.show({
									title:'保存用户资料',
									msg:r1.returnMsg,
									showType:'slide'
						       });
				         }
				  });
	    	 }
	     }
	     //切换用户性别        男：1;女：2
	     function changeBoyOrGirlRadio(idx){
	    	 if(idx==1){
	    		 $("#dqm_systemManager_boy").attr("checked",true);
	    		 $("#dqm_systemManager_girl").attr("checked",false);
	    	 }else{
	    		 $("#dqm_systemManager_boy").attr("checked",false);
	    		 $("#dqm_systemManager_girl").attr("checked",true);
	    	 }
	     }
		
	     //加载系统头像数据
    	 function loadHeadPicture(){
	    	 var str="";
	    	 $("#dqm_systemManager_loadHeadPicture").empty();
    		 for(var idx=1;idx<11;idx++){
    			 str+="<img id='image"+idx+"' onclick='pitchOnPicture(this)' src='${pageContext.request.contextPath}/images/headpicture/"+idx+".gif' style='width:90px;height:90px;border:1px solid #525aff;margin-right:1px;margin-bottom:1px;margin-left:2px;margin-top:1px;'/>"
    		 }
    		 $("#dqm_systemManager_loadHeadPicture").html(str);
    	 }
	     //触发图片选中事件
	     function pitchOnPicture(obj){
	    	//过滤其他没有选中的样式
	    	$("#dqm_systemManager_loadHeadPicture").find($("img").each(function(index,currObj){
	    		if(currObj.id!=obj.id){
	    			$(currObj).css({"border":"1px solid #525aff"});
	    		}
	    	}));
	    	$(obj).css({"border":"2px solid #d61821"});
	    	 //预览选中的图片
	    	$("#dqm_systemManager_personHeadPicture").attr("src",obj.src);
	    	
	    	
	     }
	     //触发自定义头像操作
	     function customHeadPicture(){
	    	 $("#dqm_systemManager_systemTable").hide();
	    	 $("#dqm_systemManager_personalTable").show();
	     }
	     //返回系统头像操作
	     function goBack(){
	    	 $("#dqm_systemManager_systemTable").show();
	    	 $("#dqm_systemManager_personalTable").hide();
	     }
	     //验证数据合法性
	     function validateData(){
	    	//校验手机号码
	    	var usertelephone=$("#dqm_systemManager_usertelephone").val();
	    	if(""!=usertelephone){
	    		var patrn=/^1[3|4|5|8][0-9]\d{4,8}$/;
	    		if (!patrn.test(usertelephone)|| usertelephone.length!=11){
		    		var str="*手机号码格式不正确!*";
		    		$("#validate_telephone").text(str);
		    		return;
		    	}else{
		    		$("#validate_telephone").text("");
		    	}
	    	}else{
	    		$("#validate_telephone").text("手机号码不允许为空！");
	    		return;
	    	}
	    	//校验电子邮箱
	    	var useremail=$("#dqm_systemManager_useremail").val();
	    	if(""!=useremail){
	    		var reg1 =/^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.(?:com|cn)$/;
	    		if (!reg1.test(useremail)) {
		            var str="*不是有效的E_mail地址，请输入有效的E_mail!*";
		    		$("#validate_email").text(str);
		    		return;
		        }else{
		        	$("#validate_email").text("");
		        	return true;
		        }
	    	}else{
	    		$("#validate_email").text("电子邮箱不允许为空！");
	    		return;
	    	}
	    	
	     }
	     //修改用户密码
	     function modifyUserPwd(){
	    	var configPwd=$("#dqm_systemManager_modify_confim_new_password").val();
	    	var oldpwd=$("#dqm_systemManager_modify_old_password").val();
	    	var newPwd=$("#dqm_systemManager_modify_new_password").val();
	    	if(oldpwd=="" || oldpwd.length<0){
	    		$("#dqm_systemManager_modify_valid_old_password").text("*原密码不允许为空*");
	    		return;
	    	}else{
	    		$("#dqm_systemManager_modify_valid_old_password").text("");
	    	}
	    	if(newPwd=="" || newPwd.length<0){
	    		$("#dqm_systemManager_modify_valid_new_password").text("*新密码不允许为空*");
	    		return;
	    	}else{
	    		$("#dqm_systemManager_modify_valid_new_password").text("");
	    	}
	    	if(configPwd=="" || configPwd.length<0){
	    		$("#dqm_systemManager_modify_valid_confim_new_password").text("*确认密码不允许为空*");
	    		return;
	    	}else{
	    		$("#dqm_systemManager_modify_valid_confim_new_password").text("");
	    	}
	    	if(configPwd!=newPwd){
	    		$("#dqm_systemManager_modify_valid_confim_new_password").text("*两次密码不匹配*");
	    		return;
	    	}else{
	    		$("#dqm_systemManager_modify_valid_confim_new_password").text("");
	    	}
	    	var userid=$("#dqm_systemManager_userId").val();
	    	$.ajax({
				 url :'${pageContext.request.contextPath}/systemManagerAction!modifyUserPwd.action?userid='+userid,
				 data:serializeObject($('#dqm_systemManager_modify_password_frm')),
				 dataType :'json',
				 cache : true,
				 success : function(r1){ 
				       $.messager.show({
							title:'保存用户密码',
							msg:r1.returnMsg,
							showType:'slide'
				       });
		         }
		   });
	     }
	     //当用户放开键盘或密码输入框失去焦点时，根据不同的级别显示不同的颜色       
	     function pwStrength(pwd) {           
	    	var  O_color = "#eeeeee";            
	    	var  L_color = "#EE1111";           
	    	var  M_color = "#EEEE11";            
	    	var  H_color = "#38F709";
	    	var Lcolor=null,Mcolor=null,Hcolor=null;
	    	if (pwd == null || pwd == '') {         
	    		Lcolor = Mcolor = Hcolor = O_color;     
	    	}else {          
	    		var S_level = checkStrong(pwd);   
	    		switch (S_level) {            
	    		     case 0:                        
	    		    	 Lcolor = Mcolor = Hcolor = O_color;                
	    		     case 1:                       
	    		    	 Lcolor = L_color;                      
	    		    	 Mcolor = Hcolor = O_color;                        
	    		    	 break;                    
	    		     case 2:                        
	    		    	 Lcolor = Mcolor = M_color;                       
	    		    	 Hcolor = O_color;                        
	    		    	 break;                    
	    		     default:                      
	    		    	 Lcolor = Mcolor = Hcolor = H_color;             
	    		 }            
	    	}     
	    	document.getElementById("dqm_systemManager_modify_strength_L").style.background = Lcolor;            
	    	document.getElementById("dqm_systemManager_modify_strength_M").style.background = Mcolor;            
	    	document.getElementById("dqm_systemManager_modify_strength_H").style.background = Hcolor;           
	     } 
	     //测试某个字符是属于哪一类.        
	     function CharMode(iN) {     
	    	//数字 
	    	if (iN >= 48 && iN <= 57)return 1;   
	    	//大写字母    
	    	if (iN >= 65 && iN <= 90)return 2;
	    	//小写   
	    	if (iN >= 97 && iN <= 122){           
	    		return 4;  
	        }else{//特殊字符 
	        	return 8;	
	        }                 
	     }
	    //返回密码的强度级别 
	    function checkStrong(sPW) {    
	    	if (sPW.length <= 4) return 0; //密码太短     
	    	var Modes = 0;           
	    	for (i = 0; i < sPW.length; i++) {    
	    		//测试每一个字符的类别并统计一共有多少种模式.                
	    		Modes |= CharMode(sPW.charCodeAt(i));         
	    	}           
	    	return bitTotal(Modes);      
	    }
	    //计算出当前密码当中一共有多少种模式        
	    function bitTotal(num) {            
	    	var modes = 0;            
	        for (i = 0; i < 4; i++) {           
	        	if (num & 1) modes++;          
	        	num >>>= 1;            
	        }            
	      return modes;        
	    }
	  </script>
     <div id="dqm_systemManager_tabs" class="easyui-tabs" style="width:700px;height:500px;"> 
	    <div title="用户资料" style="padding-right:5px;">
	       <form id="dqm_systemManager_frm"  method="post">
	          <input type="hidden" id="dqm_systemManager_userId" name="userid" value="${sessionInfo.userid}">
	           <table   style="width:100%" class="listtable">
		            <tr>
		               <td style="width:10%;height:50px;"></td>
		               <td style="width:20%;text-align:right;padding-right:15px;height:50px;">用户性别</td>
		               <td style="width:50%;text-align:left;height:50px;">
		                 <div style="margin-left:10px;vertical-align:middle">
		                    <c:choose>
							     <c:when test="${sessionInfo.sex==1}">
							          <input type="radio" id="dqm_systemManager_boy"   value="1" name="usersex_boy" checked="checked" onclick="changeBoyOrGirlRadio(1)"/>男
		                              <input type="radio" id="dqm_systemManager_girl"  value="2" name="usersex_girl" style="margin-left:30px" onclick="changeBoyOrGirlRadio(2)"/>女
							     </c:when>
							     <c:otherwise>
									  <input type="radio" id="dqm_systemManager_boy"   value="1" name="usersex_boy" onclick="changeBoyOrGirlRadio(1)"/>男
		                              <input type="radio" id="dqm_systemManager_girl"  value="2" name="usersex_girl" style="margin-left:30px" checked="checked" onclick="changeBoyOrGirlRadio(2)"/>女
							     </c:otherwise>
					         </c:choose>
		                 </div>
		               </td>
		               <td style="width:20%;height:50px;"></td>
		             </tr>
		             <tr>
		               <td ></td>
					   <td style="text-align:right;padding-right:15px;height:50px;">手机号码</td>
					   <td >
					       <input type="text"  id="dqm_systemManager_usertelephone" name="phonenum" value="${sessionInfo.phonenum}" style="width:200px" />
					   </td>
					   <td  nowrap="nowrap" style="text-align:left"><span id="validate_telephone" style="color:red;"></span></td>
		             </tr>
		             <tr>
		               <td></td>
					   <td style="text-align:right;padding-right:15px;height:50px;">电子邮箱</td>
					   <td ><input type="text"  id="dqm_systemManager_useremail" name="email" value="${sessionInfo.email}" style="width:200px;" /></td>
					   <td nowrap="nowrap" style="text-align:left"><span id="validate_email" style="color:red;"></span></td>
		             </tr>
		             <tr>
		               <td ></td>
					   <td style="text-align:right;padding-right:15px;">自我简介</td>
					   <td height="68px">
					      <textarea id=""  name="userdetailinfo"  class="easyui-validatebox" data-options="required:true,validType:'length[0,60]'" style="width:100%;height:50px;">${sessionInfo.userdetailinfo}</textarea>
					   </td>
					   <td ></td>
		             </tr>
		             <tr>
		               <td ></td>
					   <td style="text-align:right;padding-right:15px">个性签名</td>
					   <td height="68px">
						   <textarea id=""  name="signatureinfo"  class="easyui-validatebox" data-options="required:true,validType:'length[0,60]'" style="width:100%;height:50px;">${sessionInfo.signatureinfo}</textarea>
					   </td>
					   <td  valign="top"></td>
		             </tr>
		             <tr>
		               <td style="height:50px;"></td>
					   <td colspan="2" style="height:50px;text-align:center;padding-right:15px">
					     <input type="button" id="btnQuery" name="" value="保存资料" class="btn_Class"  onclick="saveUserDetail()"/>
					   </td>
					   <td style="height:50px;"></td>
	                </tr>
	           </table>
	       </form>  
	    </div>  
	    <!-- 系统头像显示删除 -->
<!-- 	    <div id="dqm_systemManager_modifyHeadPicture" title="修改头像" style="padding-right:5px;">   -->
<!-- 	       系统头像显示 -->
<!-- 	       <table id="dqm_systemManager_systemTable" style="width:100%"> -->
<!-- 	           <tr> -->
<!-- 	               <td style="width:20%;height:90px;text-align:right;vertical-align:top;padding-top:5px;padding-right:5px">头像预览</td> -->
<!-- 	               <td style="width:10%;height:90px;text-align:center;"> -->
<%-- 	                   <c:choose> --%>
<%-- 					     <c:when test="${!empty sessionInfo.picpath}"> --%>
<%-- 					        <img alt="系统头像" id="dqm_systemManager_personHeadPicture" src="${sessionInfo.picpath}" style="width:90px;height:90px;border:1px solid #525aff;margin-right:1px;margin-bottom:1px;margin-left:1px"/> --%>
<%-- 					     </c:when> --%>
<%-- 					     <c:otherwise> --%>
<%-- 							<img alt="系统头像" id="dqm_systemManager_personHeadPicture" src="${pageContext.request.contextPath}/images/headpicture/none.gif" style="width:90px;height:90px;border:1px solid #525aff;margin-right:1px;margin-bottom:1px;margin-left:1px"/> --%>
<%-- 					     </c:otherwise> --%>
<%-- 				       </c:choose> --%>
<!-- 	               </td> -->
<!-- 	               <td style="width:40%;height:90px;text-align:left" valign="bottom"> -->
<!-- 	                 <div style="margin-left:10px;margin-bottom:15px"> -->
<!-- 	                                                                 点击选择系统头像 <a onclick="customHeadPicture()" style="margin-left:20px;text-decoration: underline;color:blue;cursor:pointer">自定义头像</a> -->
<!-- 	                 </div> -->
<!-- 	               </td> -->
<!-- 	               <td style="width:30%;height:90px;"></td> -->
<!-- 	           </tr> -->
<!-- 	           <tr> -->
<!-- 	               <td style="width:20%;text-align:right;"></td> -->
<!-- 	               <td style="width:10%;text-align:center;"></td> -->
<!-- 	               <td style="width:60%;text-align:left"> -->
<!-- 	                  <div id="dqm_systemManager_loadHeadPicture" style="border:#95b8e7 solid 1px;overflow-y:scroll;height:240px"></div> -->
<!-- 	               </td> -->
<!-- 	               <td style="width:10%;"></td> -->
<!-- 	           </tr> -->
<!-- 	           <tr> -->
<!-- 	               <td style="width:20%;text-align:right;"></td> -->
<!-- 	               <td colspan="2" style="width:50%;text-align:center;"> -->
<!-- 	                  <input type="button" id="btnQuery" name="" value="修改头像" class="btn_Class" style="margin-top:15px;" onclick="saveHeadPicture()"/> -->
<!-- 	               </td> -->
<!-- 	               <td style="width:30%;"></td> -->
<!-- 	           </tr> -->
<!-- 	       </table> -->
<!-- 	       自定义头像显示 -->
<!-- 	       <table  id="dqm_systemManager_personalTable" style="width:100%"> -->
<!-- 	            <tr> -->
<!-- 	              <td colspan="4" style="width:100%;text-align:center;font-size:20px;color:blue">你可以选择本地一张图片作为自己的头像</td> -->
<!-- 	            </tr> -->
<!-- 	            <tr> -->
<!-- 	               <td style="width:20%;height:90px;text-align:right;vertical-align:top;padding-top:5px;padding-right:5px">头像</td> -->
<!-- 	               <td style="width:10%;height:90px;text-align:center;"> -->
<%-- 	                   <c:choose> --%>
<%-- 					     <c:when test="${!empty sessionInfo.picpath}"> --%>
<%-- 					        <img alt="系统头像" id="dqm_systemManager_personHeadPicture" src="${sessionInfo.picpath}" style="width:90px;height:90px;border:1px solid #525aff;margin-right:1px;margin-bottom:1px;margin-left:1px"/> --%>
<%-- 					     </c:when> --%>
<%-- 					     <c:otherwise> --%>
<%-- 							<img alt="系统头像" id="dqm_systemManager_personHeadPicture" src="${pageContext.request.contextPath}/images/headpicture/none.gif" style="width:90px;height:90px;border:1px solid #525aff;margin-right:1px;margin-bottom:1px;margin-left:1px"/> --%>
<%-- 					     </c:otherwise> --%>
<%-- 				       </c:choose> --%>
<!-- 	               </td> -->
<!-- 	               <td style="width:60%;height:90px;text-align:left" valign="bottom"> -->
<%-- 	                <form id="dqm_systemManager_upload_pic_frm" enctype="multipart/form-data" action="${pageContext.request.contextPath}/systemManagerAction!uploadFile.action" method="post"> --%>
<!-- 	                   用户id -->
<%-- 	                   <input type="hidden" id="" name="userid" value="${sessionInfo.userid}"> --%>
<!-- 	                   <div style="margin-bottom:5px;"> -->
<!-- 	                     <input type="file" id="dqm_systemManager_upload_pic" name="filedata" class="selectkpiClass" style="background-color:white;margin-left:5px"/> -->
<!-- 		                 <input type="submit"  value="上传" class="buttonClass" /> -->
<!-- 		                 <input type="button" id="" name="" value="返回"  class="buttonClass" onclick="goBack()"/> -->
<!-- 	                    </div> -->
<!-- 	                </form> -->
<!-- 	               </td> -->
<!-- 	               <td style="width:10%;height:90px;"></td> -->
<!-- 	           </tr> -->
<!-- 	       </table> -->
<!-- 	    </div> -->
	    
	    <div id="dqm_systemManager_modify_password" title="密码安全" style="padding-right:5px;">
	      <form id="dqm_systemManager_modify_password_frm" method="post">
	       <table  class="listtable" width="100%">
	           <tr>
	              <td style="width:40%;text-align:right;height:50px;">原密码：</td>
	              <td style="width:60%;text-align:left;height:50px;"><input type="password" id="dqm_systemManager_modify_old_password" name="useroldpwd" />&nbsp;<span style="color:red" id="dqm_systemManager_modify_valid_old_password"></span></td>
	           </tr>
	           <tr>
	              <td style="text-align:right;height:50px;">新密码：</td>
	              <td style="text-align:left;height:50px;"><input type="password" id="dqm_systemManager_modify_new_password" name="" onkeyup="pwStrength(this.value)" onblur="pwStrength(this.value)"/>&nbsp;<span style="color:red" id="dqm_systemManager_modify_valid_new_password"></span></td>
	           </tr>
	           <tr>
	              <td style="text-align:right;height:50px;">确认密码：</td>
	              <td style="text-align:left;height:50px;"><input type="password" id="dqm_systemManager_modify_confim_new_password" name="usernewpwd" />&nbsp;<span style="color:red" id="dqm_systemManager_modify_valid_confim_new_password"></span></td>
	           </tr>
	           <tr>
	              <td style="text-align:right;height:50px;">安全级别：</td>
	              <td style="text-align:left;height:80px;" nowrap="nowrap">
	                  <div id="dqm_systemManager_modify_strength_L" style="float:left;border:1px solid #CCC;height:20px;line-height:20px;width:60px;background:#eeeeee;text-align: center">弱</div>
	                  <div id="dqm_systemManager_modify_strength_M" style="float:left;border:1px solid #CCC;height:20px;line-height:20px;width:60px;border-left:none;background:#eeeeee;text-align: center">中</div>
	                  <div id="dqm_systemManager_modify_strength_H" style="float:left;border:1px solid #CCC;height:20px;line-height:20px;width:60px;border-left:none;background:#eeeeee;text-align: center">强</div>
	              </td>
	           </tr>
	           <tr>
	              <td colspan="2" style="text-align:center;height:50px;"><input type="button" id="" name="" class="btn_Class" value="保存资料" onclick="modifyUserPwd()"/></td>
	           </tr>
	       </table>
	      </form> 
	    </div>
     </div> 